<template>
    <div class="v-toast" :class="position">
        <span class="v-toast-text">{{ message }}</span>
    </div>
</template>

<script>
import Vue from 'vue';
export default {
    created () {
        Vue.$toast = Vue.prototype.$toast = this.toast;
    },
    methods: {toast (d) {
        this.message = typeof (d) === 'string' ? d : d.message;
        this.setPostion(d.position);
        clearTimeout(this.clean);
        this.clean = setTimeout(() => {
            this.setPostion(d.position, true);
        }, d.time || this.time);
    },
    setPostion (str, noShow) {
        noShow = noShow ? '' : ' v-toast-show';
        if (str === 'top') {
            this.position = 'is-placetop' + noShow;
        } else if (str === 'bottom') {
            this.position = 'is-placebottom' + noShow;
        } else {
            this.position = 'is-placemiddle' + noShow;
        }
    }

    },
    data () {
        return {
            position: 'is-placemiddle',
            message: '我是提示',
            time: 3000,
            clean: false
        };
    }
};
</script>
<style scoped>
.v-toast {
    opacity: 0;
    max-width: 80%;
    position: fixed;
    padding:0.29rem 0.3rem;
    border-radius: 0.1rem;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    box-sizing: border-box;
    text-align: center;
    z-index: -1;
    transition: opacity 0.3s linear,z-index 0.3s linear;

}
.v-toast.v-toast-show{opacity: 1;z-index: 999999;}
.v-toast.is-placebottom {
        bottom: 1rem;
        left: 50%;
        transform: translate(-50%, 0);
    }
.v-toast.is-placemiddle {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
.v-toast.is-placetop {
        top: 1rem;
        left: 50%;
        transform: translate(-50%, 0);
    }
.v-toast-text {
    font-size: 0.28rem;
    line-height: 1.3;
    display: block;
    text-align: center;

}

</style>
